<template>
	<view>
		<view class="titleBox1">
			<view class="titleLeft1">
				<uni-icons color="#fff" type="back"  @click="goBack" size="30"></uni-icons>
			</view>
			<view class="titleText1">
				<text>会员支付</text>
			</view>
		</view>
		<!--  -->
			<view class="box">
				<view class="img-box">
					<img class="img" src="../../static/my/banee.jpg" alt="" @click="goPay">
				</view>
				<!-- <view class="price-box">
					<text>会员价格</text>
					<text>{{vipPrice}}元/年</text>
				</view> -->
				<view class="introduce-box">
					<view class="title">
						会员介绍
					</view>
					<view class="introduce">
						<view class="cont">
							<image src="../../static/my/dian.png" mode=""></image>
							<view>在会员有效期内不满意未使用服务的情况下,可申请退出会员</view>
						</view>
						<view class="cont">
							<image src="../../static/my/dian.png" mode=""></image>
							<view>会员到期后自动原路退回99元的年费</view>
						</view>
						<view class="cont">
							<image src="../../static/my/dian.png" mode=""></image>
							<view>第二年不可退</view>
						</view>
					</view>
				</view>
				<view class="introduce-box">
					<view class="title">
						会员优势
					</view>
					<view class="introduce">
						<view class="introduce">
							<view class="cont">
								<image src="../../static/my/dian.png" mode=""></image>
								<view>只有会员账号才能发布展示</view>
							</view>
							<view class="cont">
								<image src="../../static/my/dian.png" mode=""></image>
								<view>不是会员发布需要缴纳中介服务费用</view>
							</view>
							<view class="cont">
								<image src="../../static/my/dian.png" mode=""></image>
								<view>会员账号发布时不需要支付</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bom-box">
					<button class="right" @click="goPay">立即支付</button>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vipPrice:''
			};
		},
		onLoad() {
			
		},
		methods: {
			// 返回
			goBack() {
				uni.navigateBack(1)
			},
			goPay() {
				uni.navigateTo({
					url:'/pagesA/pay/pay'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.box {
	.img-box {
		padding-top: 20rpx;
		height: 496rpx;
		width: 750rpx;
		margin-top: -30rpx;
	}
	.img-box .img{
		width: 100%;
		height: 100%;
	}
	.price-box {
		margin: 30rpx 0 60rpx;
		text {
			margin-right: 30rpx;
		}
	}
	.introduce-box {
		padding: 0 20rpx;
		margin-bottom: 100rpx;
		.title {
			background: linear-gradient(180deg, #585858 0%, #020614 100%);
			border-radius: 16px 16px 0px 0px;
			opacity: 1;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			margin-top: 30rpx;
			color: #fff;
		}
	}
	.advantage-box {
		.title {
			margin-bottom: 30rpx;
		}
	}
	.bom-box {
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		.right {
			width: 264rpx;
			height: 80rpx;
			background: #FF5F17;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			opacity: 1;
			color: #fff;
			line-height: 80rpx;
		}
	}
}
.introduce {
	padding:0 20rpx;
	display: flex;
	flex-direction: column;
}
.introduce .cont{
	padding: 20rpx 0;
	display: flex;
	align-items: center;
	font-size: 32rpx;
	color: #1B1C1E;
}
.introduce image{
	width: 24rpx;
	height: 24rpx;
	margin-right: 10rpx;
}
.titleBox1 {
	position: fixed;
	top: 4vh;
	display: flex;
	color: #fff;
}

.titleLeft1 {
	padding-left: 16rpx;
}

.titleText1 {
	font-size: 36rpx;
	margin-left: 240rpx;
}
.titleRight {
	width: 140rpx;
	height: 100%;
}
</style>
